<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    {load href="__CSS__/bootstrap.min.css"/}
    {load href="__CSS__/swfupload.css"/}
    {load href="__JS__/jquery-1.10.2.min.js"/}
    {load href="__STATIC__/layer/layer.js"/}
    {load href="__STATIC__/laydate/laydate.js"/}
    {load href="__JS__/bootstrap.bundle.min.js"/}
</head>
<body>

<div id="content">
    <div id="tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" href="#upload_1" data-toggle="tab">上传附件</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#upload_2" data-toggle="tab">网络地址</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#upload_3" data-toggle="tab" onclick="ajaxload(1,1,'filelist',0,'<?php echo date("Y-m-d H:i:s",time()); ?>');">附件</a>
            </li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="upload_1">
                <div id="divMovieContainer">
                    {if condition="$watermark_enable==1"}
                        <div class="water-select">
                            <input type="checkbox" id="addwater" name="addwater" value="1" onclick="addwater_enable();" />
                            <span class="text-info">是否添加水印</span>
                        </div>
                    {/if}
                    <div class="btn btn-primary" id="filePicker">选择文件</div>
                    <div class="max-upload">
                        支持<span class="text-danger">{$attach['file_types']}</span> 格式。
                        最多上传<span class="text-danger">{$small_upfile_limit}</span> 个附件,单文件最大<span class="text-danger">{$attach['file_size']|byte_format}</span>
                    </div>
                </div>

                <div class="webupload_current"></div>
                <div id="swfupload-box">
                    <ul class="attachment-list" id="thumbnails">
                    </ul>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="upload_2">
                请输入网络地址: <input type="text" id="fileurl" name="fileurl" class="form-control" value=""  style="width:350px;"  onblur="addfileurl(this)">
            </div>

            <div role="tabpanel" class="tab-pane" id="upload_3">
                <div id="filelist"></div>
            </div>
        </div>
    </div>
</div>

<div id="myuploadform" style="display:none;"></div>
<script>
    function addfileurl(obj) {
        var strs = $(obj).val() ? $(obj).val() : '';

        if(strs){
            var datas='<div id="uplist_1">' +
                '<input type="hidden" id="aids" name="aids[]" value="0" />' +
                '<input type="text" id="filedata" name="filedata[]" value="'+strs+'"  />' +
                '<input type="text"  id="namedata" name="namedata[]" value=""  />' +
                '<a href="javascript:remove_this(\'uplist_1\');">移除</a> ' +
            '</div>';
            $('#myuploadform').html(datas);
            $('#thumbnails a').removeClass("on");
            $('.img a').removeClass("on");
        }else{
            $('#myuploadform').html('');
        }
    }
</script>


<script type="text/javascript">
var file_limit = '{$attach['file_limit']}';

$.getScript("__STATIC__/webuploader/webuploader.js", function() {
    if (!WebUploader.Uploader.support()) {
        alert('您的浏览器不支持上传功能！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
    }
    var uploader = WebUploader.create({
        multiple: true,
        auto: true,
        swf: "__STATIC__/webuploader/Uploader.swf",
        server: "/?g=Admin&m=Attachment&a=upload",
        pick: {
            id: '#filePicker',
            innerHTML: ''
        },
        accept: {
            title: 'file',
            extensions:  "{$attach['file_types']}",
            mimeTypes:  "{$attach['mimeTypes']}",
        },
        fileSingleSizeLimit: "{$attach['file_size']}",
        duplicate: true,
        compress: false,
        fileNumLimit : "{$attach['file_limit']}",

        formData: {
            "session_id" : "<?php echo session_id(); ?>",
            "userid":"{$userid}",
            "swf_auth_key": "{$swf_auth_key}",
            "isthumb" : "{$attach['isthumb']}",
            "modelid" : "{$attach['modelid']}",
            "addwater": "0",
        }

    });
    //上传时
    uploader.on('fileQueued', function(file) {
        var item_progress = '<div class="progress" id="' + file['id'] + '"><span class="bar"></span><span class="percent">0%</span></div></li>';
        $(".webupload_current").prepend(item_progress);
    });
    //上传中
    uploader.on('uploadProgress', function(file, percentage) {
        var percent = parseFloat(percentage * 100);
        $("#" + file.id).find('.bar').css({"width": percent + "%"});
        $("#" + file.id).find(".percent").text(percent + "%");
    });

    uploader.on('uploadBeforeSend', function(block, data) {
        // data.maxsize = maxsize;
    });

    uploader.on("error", function (type) {
        if (type == "Q_TYPE_DENIED") {
            layer.msg("文件格式不对");
        } else if (type == "Q_EXCEED_SIZE_LIMIT") {
            layer.msg("文件总大小超出限定范围");
        }else if (type == "Q_EXCEED_NUM_LIMIT") {
            layer.msg("文件个数超出限制");
        }else if (type == "F_EXCEED_SIZE") {
            layer.msg("文件大小超出限制");
        }else {
            layer.msg("上传出错！请检查后重新上传！错误代码"+type);
        }
    });
    
    //上传成功后
    uploader.on('uploadSuccess', function(file, response) {
        if (response.status == 0) {
            layer.msg(response.info);
            return false;
        }
        $("#" + file.id).remove();
        var data = response.data;
        var id = data.aid;
        var src = data.filepath;
        var isimage = data.isimage;
        var ext =  data.fileext;
        var name = data.filename;

        if(isimage == 1) {
            var img = '<a href="javascript:void(0);" onclick="javascript:add_file(this,'+id+')" id="on_'+id+'" class="on">'+
                '<div class="icon"></div>'+
                '<img src="'+src+'" width="80" alt="'+name+'" imgid="'+id+'" path="'+src+'"/>'+
                '</a>';
        } else {
            var img = '<a href="javascript:void(0);" onclick="javascript:add_file(this,'+id+')" id="on_'+id+'" class="on">'+
                '<div class="icon"></div>'+
                '<img src="/public/images/ext/'+ext+'.png" width="80" alt="'+name+'" imgid="'+id+'" path="'+src+'"/>'+
                '</a>';
        }

        $('#thumbnails').append('<li><div id="attachment_'+id+'" class="img"></div></li>');
        $('#attachment_'+id).html(img);
        var datas='<div id="uplist_'+id+'">' +
            '<input type="hidden" name="status" id="status" value="0">' +
            '<input type="hidden" id="aids" name="aids[]"  value="'+id+'"  />' +
            '<input type="text" id="filedata" name="filedata[]" value="'+src+'"  />' +
            '<input type="text" id="namedata" name="namedata[]" value="'+name+'"  /> ' +
            '<a href="javascript:remove_this(\'uplist_'+id+'\');">移除</a>' +
            '</div>';
        $('#myuploadform').append(datas);
    });

    uploader.on('uploadError', function(file, reason) {
        alert("上传失败！请重试。");
    });
});

function add_file(obj,id,status){
    var src = $(obj).children("img").attr("path");
    var name = $(obj).children("img").attr("alt");
    if($(obj).hasClass('on')){
        $(obj).removeClass("on");
        $('#myuploadform #uplist_'+id ).remove();
    } else {
        var num = $('#myuploadform > div').length;
        if(num < file_limit){
            $(obj).addClass("on");
            var datas='<div id="uplist_'+id+'"><input type="hidden" name="status" id="status" value="'+status+'"><input type="hidden"  id="aids" name="aids[]"  value="'+id+'"  /><input type="text"  id="filedata" name="filedata[]" value="'+src+'"  /> <input type="text" id="namedata" name="namedata[]" value="'+name+'"  /> &nbsp;<a href="javascript:remove_this(\'uplist_'+id+'\');">移除</a> </div>';
            $('#myuploadform').append(datas);
        }else{
            alert('已经达到附件限制数');
        }
    }
}

// 加载图片库
function ajaxload(typeid,page,inputid,start_time,end_time){
    var data = {
        file_type:  "{$attach['file_types']}",
        file_size:  "{$attach['file_size']}",
        start_time:start_time,
        end_time:end_time
    };
    var url =  "/Admin/Attachment/filelist?typeid="+typeid+"&p="+page+"&inputid="+inputid;
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function(msg){
            $('#'+inputid).html(msg);

        }
    });
}

function addwater_enable(){
    if($('#addwater').is(':checked')) {
        swfu.addPostParam('addwater', '1');
    } else {
        swfu.removePostParam('addwater');
    }
}
</script>
</body>
</html>